<!--添加项目介绍组件-->
<template>
  <el-container>
    <el-main>
      <div class="top"><h1>项目信息发布</h1></div>
      <div class="project">
        <el-form ref="submitInfoRef" :model="submitInfo" label-width="100px">
          <el-form-item label="项目标题:">
            <el-input v-model="submitInfo.title" />
          </el-form-item>
          <el-form-item label="发布时间:">
            <el-input @blur="isDate(submitInfo.releaseTime)" placeholder="例如：2018-09-02" v-model="submitInfo.releaseTime" />
          </el-form-item>
          <el-form-item label="项目简介:">
            <el-input v-model="submitInfo.summary" />
          </el-form-item>
          <el-form-item label="项目类别:">
            <el-input v-model="submitInfo.category" />
          </el-form-item>
           <el-form-item label="项目关键字:">
            <el-input v-model="submitInfo.keyword " />
          </el-form-item>
          <el-form-item label="封面图片:">
            <input type="file" name="myfiles"  @change="submitPicture" />
          </el-form-item>
          <el-form-item label="">
            <div class="picture"><img :src="this.submitInfo.picture" alt=""></div>
          </el-form-item>
        </el-form>
      </div>
      <el-form label-width="100px">
        <el-form-item label="项目内容:" style="margin-bottom:0px;"></el-form-item>
      </el-form>
      <div id="editor"></div>
      <!-- <div class="text"> -->
      <!--  </div> -->
      <el-form>
        <!--按钮区域-->
        <el-form-item class="btns">
          <el-button type="primary" @click="submit">发布</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import E from 'wangeditor';
export default {
  name: 'creat_project',
  data() {
    return {
      hinddle: 'visibility: hidden',
      submitInfo: {
        picture:''
      },
    };
  },
  mounted() {
    var that = this;
    this.editor = new E('#editor');
    this.editor.customConfig.onchange = function (text) {
      that.submitInfo.content = text;
    };

    this.editor.customConfig.uploadImgServer =
      'http://dl.sword.ink:2334/upload/picture';
    //必要设置，值必须为“myfiles”
    this.editor.customConfig.uploadFileName = 'myfiles';
    // 图片最大体积为20MB
    this.editor.customConfig.uploadImgMaxSize = 20 * 1024 * 1024;
    //超时时间要设置长一点，否则大图片上传可能失败，默认为10秒，这里设置为30秒
    this.editor.customConfig.uploadImgTimeout = 30000;
    this.editor.create();
    this.editor.txt.html('<p>欢迎使用wangEditor编辑器</p>');
  },

  methods: {
    isDate(dateString) {
    console.log(dateString)
    if (dateString== undefined) return true;
    var r = dateString.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
    if (r == null) {
      alert(
        '请输入格式正确的日期格式：yyyy-mm-dd 例如：2008-08-08'
      );
      return false;
    }
    var d = new Date(r[1], r[3] - 1, r[4]);
    var num =
      d.getFullYear() == r[1] &&
      d.getMonth() + 1 == r[3] &&
      d.getDate() == r[4];
    if (num == 0) {
      alert(
        '请输入格式正确的日期格式：yyyy-mm-dd\n\r例 如：2008-08-08\n\r'
      );
    }
    return num != 0;
  },
    submitPicture(e) {
      let self = this;
      let file = e.target.files[0];
      let param = new FormData(); // 创建form对象
      param.append('myfiles', file); // 通过append向form对象添加数据
      // console.log(param.get('myfiles')); // FormData私有类对象，访问不到，可以通过get判断值是否传进去
      let config = {
        headers: { 'Content-Type': 'multipart/form-data' },
      };
      // 添加请求头
      this.$axios
        .post('http://sword.ink:2334/upload/picture', param, config)
        .then((res) => {
          // console.log(res)
          // this.submitInfo.picture=res.data.data[0];
          if (res.data.errno === 0) {
            console.log(res);
            // self.imgs = res.data.data[0];
            this.submitInfo.picture = res.data.data[0];
            console.log(this.submitInfo.picture);
          }
        });
    },
    submit() {
      var that = this;
      console.log(this.submitInfo);
      let config = {
        headers: { 'Content-Type': 'application/json' },
      };
      this.$http
        .post('project', JSON.stringify(this.submitInfo), config)
        .then(({data: res}) => {
          if (res.state !== true) return this.$message.error(res.msg)
                else{
          this.$message.success(res.msg)
                }
                console.log(res)
        });
    },
  },
};
</script>

<style scoped>
.el-container {
  height: 100%;
}
.el-header {
  height: 500px;
}
.el-main{
  overflow: scroll;
}
::-webkit-scrollbar {display:none}
.top{
  width: 100%;
  height: auto;
  text-align: center;
}
.top h1{
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 25px;
  font-family: '宋体';
}
.project {
  height: auto;
  width: 100%;
}
.text {
  width: 100%;
  height: 50vh;
  border: 2px solid aqua;
}
.btns {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.picture img{
  width: 50vh;
}
</style>
